<template>
  <div class="flex items-center">
    <el-icon
      :size="20"
      v-if="modelValue"
      class="mr-2"
    >
      <component :is="modelValue" />
    </el-icon>

    <el-select
      :modelValue="modelValue"
      filterable
      placeholder="请选择图标"
      class="m-2"
      @change="handleChange"
      style="width: 280px"
    >
      <el-option
        v-for="item in icons"
        :key="item"
        :label="item"
        :value="item"
      >
        <!-- 使用的是默认插槽 -->
        <div class="flex items-center justify-between">
          <el-icon>
            <component :is="item" />
          </el-icon>
          <span class="text-gray-500">{{ item }}</span>
        </div>
      </el-option>
    </el-select>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 引入全部的图标
import * as iconList from "@element-plus/icons-vue";
console.log("iconList的key", Object.keys(iconList));

const icons = ref([]);

icons.value = Object.keys(iconList);

defineProps({
  modelValue: String,
});

const emit = defineEmits(["update:modelValue"]);
const handleChange = (icon) => {
  console.log("handleChange:", icon);
  emit("update:modelValue", icon);
};
</script>
